<template>
    <el-card style="width: 100%" header="我的收藏">
        <el-table v-loading="loading" :data="list" border size="mini">
            <el-table-column label="条形码" align="center">
                <template slot-scope="{ row }">
                    <el-link href="#/detail/35">{{ row.data.barCode }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="商品图片" align="center">
                <template slot-scope="{ row }">
                    <el-image style="width: 50px" :src="$img + row.data.pic"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="商品编号" align="center">
                <template slot-scope="{ row }">
                    <el-link href="#/detail/35">{{ row.data.productSn }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" align="center"> </el-table-column>
            <el-table-column prop="payment" label="您的价格" align="center">
                <template slot-scope="{ row }">
                    <el-link href="#/detail/35">{{ row.data.price }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="收藏时间" align="center">
                <template slot-scope="{ row }">
                    {{ row.addTime | ymdhmsTime }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                    <el-button size="mini" type="danger" @click="handelDelete(row.id)"> 删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :pageSize="pageSize"
            :total="total"
            @current-change="handleChange"
        >
        </el-pagination>
    </el-card>
</template>
<script>
export default {
    name: 'order-list',

    data() {
        return {
            loading: false,
            list: [],
            pageSize: 10,
            pageNum: 1,
            total: 0
            // showNextPage: true // 加载更多：是否显示按钮(即数据加载完了，没有更多则不显示按钮)
            // busy: false // 滚动加载，是否触发
        };
    },
    mounted() {
        this.getOrderList();
    },
    methods: {
        getOrderList() {
            this.loading = true;
            // this.busy = true
            // ?pageNum=1&pageSize=10
            this.$http
                .get('/api/member/favorite/list', {
                    params: { pageNum: this.pageNum, pageSize: 20 }
                })
                .then((res) => {
                    this.list = res.records;

                    this.loading = false;
                    // this.list = res.list;
                    // // 第二种和第三钟方式(滚动加载和点击按钮加载更多)：请求的数据条数拼接，而不是替换成新的
                    // // this.list = this.list.concat(res.list)
                    this.total = res.total;
                    // this.showNextPage = res.hasNextPage
                    // this.busy = false
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        goPay(orderNo) {
            this.$router.push({
                path: '/order/pay',
                query: {
                    orderNo
                }
            });
        },
        handelDelete(id) {
            this.$confirm('提示', {
                title: '提示',
                message: '删除？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get('/api/member/favorite/delete?id=' + id).then(() => {
                    this.$message('已删除');
                    this.getOrderList();
                });
            });
        },
        // 第一种方法：分页器
        handleChange(pageNum) {
            this.pageNum = pageNum;
            this.getOrderList();
        }
    }
};
</script>
<style lang="scss">
.pagination {
    margin-top: 15px;
    text-align: right;
}
</style>
